<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        h3 a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<h3>
    <a href="">商品</a>
</h3>
    <div id="app">
        <div id="lift" style="width: 200px; float: left; margin-top: 20px;">
            <el-tree :data="products" :props="defaultProps"></el-tree>
        </div>

        <div id="top-right" style="float: right">
            <span>公司id</span>
            <el-input v-model="companyId" vplaceholder="请输入内容" style="width: 180px"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="loadPro">搜索</el-button>
        </div>

        <div id="top-center" style="float: right">
            <span>分类</span>
            <el-input v-model="pEnterprise" vplaceholder="请输入内容" style="width: 180px"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="loadPro">搜索</el-button>
        </div>
        <div id="right">
            <el-table styl0e="width: 100%"
                      :data="pro"
                      ref="proTable">
                <el-table-column label="产品编号" width="80">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.pnumber }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="产品名称" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.pname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="产品图片" width="250">
                    <template slot-scope="scope">
                        <span st    yle="margin-left: 10px">{{ scope.row.pimg }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="产品价格" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.pprice }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="产品分类" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px;">{{ scope.row.penterprise }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="公司id" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px;">{{ scope.row.companyId }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                        <el-button size="mini"  type="danger" slot="reference" @click="handleBuyPro(scope.$index, scope.row)">订购</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-top: 10px;">
                <el-pagination @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="page_size"
                               :page-size="4"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="count"
                               :background="back">
                </el-pagination>
            </div>
        </div>

        <div id="detail">
            <el-dialog :visible.sync="dialogFormVisible" >
                <template :data="details">
                    <el-descriptions title="商品信息" ref="desc">
                        <el-descriptions-item label="id">{{details.id}}</el-descriptions-item>
                        <el-descriptions-item label="商品编号">{{details.companyId}}</el-descriptions-item>
                        <el-descriptions-item label="商品名称">{{details.pname}}</el-descriptions-item>
                        <el-descriptions-item label="商品图片">{{details.pimg}}</el-descriptions-item>
                        <el-descriptions-item label="商品价格">{{details.pprice}}</el-descriptions-item>
                        <el-descriptions-item label="商品类型">
                            <el-tag size="small">{{details.penterprise}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="商品数量">{{details.pnumber}}</el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-dialog>
            <el-dialog  :visible.sync="dialogTableVisible" width="500px" >
                <el-form v-model="details">
                    <el-form-item label="商品名称">
                        <el-tag  autocomplete="off">{{details.pname}}</el-tag>
                    </el-form-item>
                    <el-form-item label="商品数量">
                        <el-input-number v-model="pnumber" :min="1" :max="10"></el-input-number>
                    </el-form-item>
                    <el-form-item label="商品单价">
                        <el-tag  autocomplete="off">{{details.pprice}}</el-tag>
                    </el-form-item>
                    <el-form-item label="总计">
                        <el-tag  autocomplete="off">{{details.pprice*pnumber}}</el-tag>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="buyPro">确定购买</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                // 当前页数
                currentPage: 1,
                // 订单总数
                count : 0,
                // 每页的数据
                page_size : [6,3],
                // 当前每页的数据
                pageSize : 6,
                // 分页背景
                back: true,
                defaultProps: {
                    children: 'products',
                    label: 'companyName'
                },
                products: [],
                companyId:"",
                pEnterprise:"",
                pro:[],
                details: {},
                dialogFormVisible:false,
                dialogTableVisible:false,
                pnumber:'',
                order:{},
            }
        },
        methods:{
            handleEdit(index,row){
                this.details = this.pro[index];
                this.dialogFormVisible = true;
            },
            loadProduct(){
                axios.get("/supplier/1")
                    .then(res => {
                        this.product = res.data.company;
                        let test=new Array();
                        test.push(this.product);
                        this.products=test;
                        // console.log(this.products);
                        this.products.forEach(com=>{
                            com.products.forEach(product=>{
                                product['companyName']=product.pname;
                            })
                        })
                        // console.log(this.company);
                    })
            },
            loadPro(){
                axios.get("/product/like?current="+ this.currentPage +"&pageSize="+ this.pageSize +
                "&companyId=" + this.companyId + "&pEnterprise=" + this.pEnterprise)
                .then(res =>{
                    this.pro = res.data.records;
                    this.count = res.data.total;
                    console.log(this.pro);
                });
            },
            buyPro(){
                this.order["productId"] = this.details.id
                this.order["number"] = this.details.pnumber
                this.order["money"] = this.details.pprice
                this.dialogTableVisible = false
                console.log(this.order)
                axios.post("/TOrder",this.order)
                    .then(res =>{
                        if(res.data == "ok"){
                            this.$message({
                                type: "success",
                                message: "添加成功",
                            })
                        }
                    })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadPro();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadPro();
            },
            handleBuyPro(index,row){
                this.details = this.pro[index];
                this.dialogTableVisible = true;
            }
        },
        mounted(){
            this.loadProduct();
            this.loadPro();
        }
    });
</script>
</html>